<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
          @submit.native.prevent
        >
          <Form-item label="关键字" prop="keyword">
            <Input
              type="text"
              v-model="searchForm.keyword"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="资讯类型" prop="type">
            <Select
              v-model="searchForm.type"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in typeList"
                :key="index"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Form-item>
          <Form-item label="信息来源" prop="sourceType">
            <Select
              v-model="searchForm.sourceType"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in sourceList"
                :key="index"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Form-item>
          <Form-item label="状态" prop="status">
            <Select
              v-model="searchForm.status"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in statusList"
                :key="index"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Row class="operation padding-row">
        <Button @click="handleAdd" type="error">添加</Button>
        <Button @click="batchDel" type="error">删除</Button>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="data"
        ref="table"
        @on-selection-change="changeSelect"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.page"
          :total="total"
          :page-size="searchForm.rows"
          @on-change="changePage"
          @on-page-size-change="changerows"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import * as API_News from "@/api/news.js";

export default {
  name: "news-list",
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        // 请求参数
        page: 1,
        rows: 10,
        keyword: "", // 关键字
        type: "", // 资讯类型
        sourceType: "", // 信息来源
        status: "", // 状态
      },
      selectList: [], // 多选数据
      typeList: [
        // 资讯类型列表
        { value: "1003001", label: "政策法规" },
        { value: "1003002", label: "求职创业" },
        { value: "1003003", label: "运动处方" },
        { value: "1003004", label: "健康科普" },
        { value: "1003005", label: "其他" },
      ],
      sourceList: [
        // 信息来源列表
        { value: '0', label: "内部供稿" },
        { value: '1', label: "外部网站" },
        { value: '2', label: "投稿" },
      ],
      statusList: [
        // 状态列表
        { value: '-1', label: "草稿" },
        { value: '0', label: "待审核" },
        { value: '1', label: "已通过" },
        { value: '2', label: "已驳回" },
        { value: '3', label: "已撤回" },
        { value: '4', label: "已发布" },
      ],
      columns: [
        // 表头
        { type: "selection", width: 60, align: "center" },
        { title: "序号", width: 100, type: "index" },
        { title: "资讯标题", key: "title", minWidth: 300, tooltip: true },
        {
          title: "资讯类型",
          minWidth: 120,
          tooltip: true,
          render: (h, params) => {
            let label = "";
            this.typeList.forEach((i) => {
              if (i.value == params.row.type) {
                label = i.label;
              }
            });
            return h("div", [h("span", {}, label)]);
          },
        },
        {
          title: "信息来源",
          minWidth: 180,
          tooltip: true,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {},
                "【" +
                  (params.row.sourceType == 0
                    ? "内部供稿"
                    : params.row.sourceType == 1
                    ? "外部网站"
                    : "投稿") +
                  "】 " +
                  (params.row.origin ? params.row.origin : "")
              ),
            ]);
          },
        },
        {
          title: "状态",
          minWidth: 120,
          render: (h, params) => {
            let label = "";
            this.statusList.forEach((i) => {
              if (i.value == params.row.status) {
                label = i.label;
              }
            });
            return h("span", {}, label);
          },
        },
        { title: "获取时间", minWidth: 180, key: "createTime", tooltip: true },
        { title: "发布时间", minWidth: 180, key: "releaseTime", tooltip: true },
        {
          title: "操作",
          width: 300,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let func = [];
            if (
              params.row.status == -1 ||
              (params.row.sourceType != 2 && params.row.status != 4)
            ) {
              func.push(this.btnDom(h, "warning", "编辑", "handleEdit", params));
            }
            if (
              params.row.sourceType != 2 &&
              (params.row.status == -1 || params.row.status == 3)
            ) {
              func.push(this.btnDom(h, "error", "删除", "handleDel", params));
            }
            if (params.row.status == -1 || params.row.status == 1) {
              func.push(this.btnDom(h, "success", "发布", "handleRelease", params));
            }
            if (params.row.status == 0) {
              func.push(this.btnDom(h, "info", "审核", "handleExamine", params));
            }
            if (params.row.status == 4) {
              func.push(this.btnDom(h, null, "撤回", "handleRevoke", params));
            }
            if (params.row.status != 0) {
              func.push(this.btnDom(h, "info", "查看", "handleView", params, true));
            }
            return h(
              "div",
              { style: { display: "flex", justifyContent: "center" } },
              func
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
    };
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.getData();
    },
    // 分页 改变页数
    changerows(v) {
      this.searchForm.rows = v;
      this.searchForm.page = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.page = 1;
      this.getData();
    },
    //多选
    changeSelect(e) {
      this.selectList = e;
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row);
            },
          },
        },
        label
      );
    },
    // 新增
    handleAdd() {
      this.$router.push({
        name: "news-form",
        query: { id: null },
      });
    },
    // 编辑
    handleEdit(v) {
      this.$router.push({
        name: "news-form",
        query: { id: v.id },
      });
    },
    // 发布
    handleRelease(v) {
      this.$router.push({
        name: "news-release",
        query: { id: v.id },
      });
    },
    // 查看
    handleView(v) {
      this.$router.push({
        name: "news-detail",
        query: { id: v.id },
      });
    },
    // 审核
    handleExamine(v) {
      this.$router.push({
        name: "news-examine",
        query: { id: v.id },
      });
    },
    // 撤回
    handleRevoke(v) {
      this.$Modal.confirm({
        title: "确认撤回",
        content: "<p>您确认要撤回此条资讯吗？</p>",
        onOk: () => {
          API_News.postNewsWithdraw({ informationId: v.id }).then((res) => {
            if (res.success) {
              this.$Message.success("已撤回");
              this.getData();
            }
          });
        },
      });
    },
    // 批量删除
    batchDel() {
      if (this.selectList.length) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "<p>您确认要删除所选的" + this.selectList.length + "条资讯吗？</p>",
          onOk: () => {
            let ids = this.selectList
              .map((i) => {
                return i.id;
              })
              .join(",");
            API_News.delNews(ids).then((res) => {
              if (res.success) {
                this.$Message.success("删除成功");
                this.getData();
              }
            });
          },
        });
      } else {
        this.$Message.warning("请先勾选数据");
      }
    },
    // 删除
    handleDel(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "<p>您确认要删除此条资讯吗？</p>",
        onOk: () => {
          API_News.delNews(v.id).then((res) => {
            if (res.success) {
              this.$Message.success("删除成功");
              this.getData();
            }
          });
        },
      });
    },
    //查询资讯列表
    getData() {
      this.loading = true;
      API_News.postNewsPage(this.searchForm)
        .then((res) => {
          if (res.success) {
            this.data = res.result.rows;
            this.data.forEach((i) => {
              i._disabled = i.status == 4 || i.sourceType == 2;
            });
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.modal-info {
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  .ivu-row {
    min-height: 60px;
    height: auto;
  }
  .box-border {
    min-height: 60px;
    width: 80%;
    height: auto;
  }
}
</style>
